import OverLay from 'ol/Overlay'
import Map from 'ol/Map'
import { LineString } from 'ol/geom'
import { unByKey } from 'ol/Observable'
// import { EventsKey } from 'ol/events'
import Feature from 'ol/Feature'
import { Vector as VectorSource } from 'ol/source'
import { DrawEvent } from 'ol/interaction/Draw'
import { Draw } from 'ol/interaction'
import { Style, Fill, Stroke, Circle } from 'ol/style'
// import { Coordinate } from 'ol/coordinate'
import GeoJSON from 'ol/format/GeoJSON'
import { Vector as VectorLayer } from 'ol/layer'

export default class MeasureControl {
  private map: Map
  private _measureTooltipElement: HTMLDivElement | null
  private _measureTooltip: OverLay | null
  private draw: Draw
  private geojson: GeoJSON
  private source: VectorSource
  constructor(map: Map) {
    this.map = map
    this._measureTooltipElement = null
    this._measureTooltip = null
    this.source = new VectorSource()
    this.draw = new Draw({
      source: this.source,
      type: 'LineString',
      style: new Style({
        stroke: new Stroke({
          color: 'blue',
          width: 2
        }),
        image: new Circle({
          radius: 7,
          fill: new Fill({
            color: '#fff'
          })
        })
      }),
      freehand: false
    })
    this.geojson = new GeoJSON()
    this.map.addInteraction(this.draw)
    this.draw.setActive(false)
    this.init()
  }
  // 添加测量控件
  init() {
    let sketch: Feature | null  // 当前正在画的要素
    let listener
    this.draw.getActive() ? this.draw.setActive(false) : this.draw.setActive(true)
    this._createMeasureTooltip()
    this.draw.on('drawstart', (evt) => {
      sketch = evt.feature
      let tooltipCoord 
      listener = sketch.getGeometry()!.on('change', (evt: any) => {
        const geom = evt.target
        let output
        if (geom instanceof LineString) {
          output = this._formatLength(geom)
          tooltipCoord = geom.getLastCoordinate()
        }
        this._measureTooltipElement!.innerHTML = output!
        this._measureTooltip?.setPosition(tooltipCoord)
      })
    })
    this.draw.on('drawend', (e: DrawEvent) => {
      let feature = e.feature
      let geojs = this.geojson.writeFeature(feature)
      this._measureTooltipElement!.className = 'ol-tooltip ol-tooltip-static'
      sketch = null
      this._measureTooltipElement = null
      this._createMeasureTooltip()
      console.log(geojs)
      this.map.addLayer(new VectorLayer({ source: this.source, properties: { name: '测距' } }))
      // 删除事件侦听器
      unByKey(listener)
    })
  }
  // 获取线段长度，并输出为千米格式
  _formatLength(line: LineString) {
    const length = line.getLength()
    let output
    if (length > 100) {
      output = Math.round((length / 1000) * 100) / 100 + ' ' + 'km'
    } else {
      output = Math.round(length * 100) / 100 + ' ' + 'm'
    }
    return output
  }
  // 创建测量时的提示框
  _createMeasureTooltip = () => {
    if (this._measureTooltipElement) {
      this._measureTooltipElement.parentNode?.removeChild(this._measureTooltipElement)
    }
    this._measureTooltipElement = document.createElement('div')
    this._measureTooltipElement.className = 'ol-tooltip ol-tooltip-measure'
    this._measureTooltip = new OverLay({
      element: this._measureTooltipElement,
      offset: [0, -15],
      positioning: 'bottom-center',
      stopEvent: false,
      insertFirst: false,
    })
    this.map.addOverlay(this._measureTooltip)
  }
}